<template>
<div class="app-container">
    <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch">
        <el-form-item label="菜单名称" prop="name">
            <el-input v-model="queryParams.name" placeholder="请输入菜单名称" clearable size="small" @keyup.enter.native="handleQuery" />
        </el-form-item>
        <el-form-item label="状态" prop="status">
            <el-select v-model="queryParams.status" placeholder="菜单状态" clearable size="small">
                <el-option v-for="dict in statusOptions" :key="dict.dictValue" :label="dict.dictLabel" :value="dict.dictValue" />
            </el-select>
        </el-form-item>
        <el-form-item>
            <el-button type="cyan" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
            <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
        </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
        <el-col :span="1.5">
            <el-button type="primary" icon="el-icon-plus" size="mini" @click="handleAdd" v-hasPermi="['system:menu:add']">新增</el-button>
        </el-col>
        <!-- <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>-->
    </el-row>

    <el-table :data="menuList" row-key="id" :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
        <el-table-column prop="name" label="菜单名称" :show-overflow-tooltip="true" width="160"></el-table-column>
        <!-- <el-table-column prop="icon" label="图标" align="center" width="100">
            <template slot-scope="scope">
                <svg-icon :icon-class="scope.row.icon" />
            </template>
        </el-table-column>-->
        <el-table-column prop="id" label="排序" width="60"></el-table-column>
        <!-- <el-table-column prop="perms" label="权限标识" :show-overflow-tooltip="true"></el-table-column>
        <el-table-column prop="component" label="组件路径" :show-overflow-tooltip="true"></el-table-column>
        <el-table-column prop="status" label="状态" :formatter="statusFormat" width="80"></el-table-column>-->
        <!--  <el-table-column label="创建时间" align="center" prop="createTime">
            <template slot-scope="scope">
                <span>{{ parseTime(scope.row.createTime) }}</span>
            </template>
        </el-table-column>-->
        <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
            <template slot-scope="scope">
                <!--  <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)" v-hasPermi="['system:menu:edit']">修改</el-button>-->
                <el-button size="mini" type="text" icon="el-icon-plus" @click="handleAdd(scope.row)" v-hasPermi="['system:menu:add']">添加</el-button>
                <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)" v-hasPermi="['system:menu:remove']">删除</el-button>
            </template>
        </el-table-column>
    </el-table>
    <!-- 添加或修改菜单对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="600px" append-to-body>
        <el-form ref="form" :model="form" :rules="rules" label-width="80px">
            <el-row>

                <!--<el-col :span="24">
                    <el-form-item v-if="form.menuType != 'F'" label="菜单图标">
                        <el-popover placement="bottom-start" width="460" trigger="click" @show="$refs['iconSelect'].reset()">
                            <IconSelect ref="iconSelect" @selected="selected" />
                            <el-input slot="reference" v-model="form.icon" placeholder="点击选择图标" readonly>
                                <svg-icon v-if="form.icon" slot="prefix" :icon-class="form.icon" class="el-input__icon" style="height: 32px;width: 16px;" />
                                <i v-else slot="prefix" class="el-icon-search el-input__icon" />
                            </el-input>
                        </el-popover>
                    </el-form-item>
                </el-col>-->
                <el-col :span="12">
                    <el-form-item label="菜单名称" prop="name">
                        <el-input v-model="form.name" placeholder="请输入菜单名称" />
                    </el-form-item>
                </el-col>

            </el-row>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button type="primary" @click="submitForm">确 定</el-button>
            <el-button @click="cancel">取 消</el-button>
        </div>
    </el-dialog>
</div>
</template>

<script>
import {
    getServe,
    addServe,
    updatserviceContent, //修改
    delSserviceContent, //删除
    getServices

} from "../../../../api/user.js";
// import Treeselect from "@riophae/vue-treeselect";
// import "@riophae/vue-treeselect/dist/vue-treeselect.css";
// import IconSelect from "@/components/IconSelect";

export default {
    name: "Menu",
    components: {
        // Treeselect,
        // IconSelect
    },
    data() {
        return {
            // 遮罩层
            loading: true,
            // 显示搜索条件
            showSearch: true,
            // 菜单表格树数据
            menuList: [],
            // 菜单树选项
            menuOptions: [],
            // 弹出层标题
            title: "",
            // 是否显示弹出层
            open: false,
            // 显示状态数据字典
            visibleOptions: [],
            // 菜单状态数据字典
            statusOptions: [],
            // 查询参数
            queryParams: {
                name: undefined,
                visible: undefined
            },
            // 表单参数
            form: {},
            // 表单校验
            rules: {
                name: [{
                    required: true,
                    message: "菜单名称不能为空",
                    trigger: "blur"
                }],
                orderNum: [{
                    required: true,
                    message: "菜单顺序不能为空",
                    trigger: "blur"
                }],
                path: [{
                    required: true,
                    message: "路由地址不能为空",
                    trigger: "blur"
                }]
            }
        };
    },
    created() {
        // this.getList();
        this.getserceList()
        // this.getDicts("sys_show_hide").then(response => {
        //     this.visibleOptions = response.data;
        // });
        // this.getDicts("sys_normal_disable").then(response => {
        //     this.statusOptions = response.data;
        // });
    },
    methods: {
        // 获取服务内容列表
        getserceList() {
            getServe().then(res => {
                if (res.code == 2000) {
                    this.menuList = res.data.menus;
                    console.log(this.menuList);
                }

            }).catch(err => {
                console.log(err);
            })
        },
        /** 查询菜单列表 */
        // getList() {
        //     this.loading = true;
        //     getServe(this.queryParams).then(response => {
        //         this.tableData = this.handleTree(response.data, "id");
        //         this.loading = false;
        //     });
        // },
        /** 转换菜单数据结构 */
        normalizer(node) {
            if (node.children && !node.children.length) {
                delete node.children;
            }
            return {
                id: node.id,
                label: node.name,
                children: node.children
            };
        },
        /** 查询菜单下拉树结构 */
        getTreeselect() {
            listMenu().then(response => {
                this.menuOptions = [];
                const menu = {
                    id: 0,
                    name: '主类目',
                    children: []
                };
                // menu.children = this.handleTree(response.data, "menuId");
                this.menuOptions.push(menu);
            });
        },
        // 显示状态字典翻译
        visibleFormat(row, column) {
            if (row.menuType == "F") {
                return "";
            }
            // return this.selectDictLabel(this.visibleOptions, row.visible);
        },
        // 菜单状态字典翻译
        statusFormat(row, column) {
            if (row.menuType == "F") {
                return "";
            }
            // return this.selectDictLabel(this.statusOptions, row.status);
        },
        // 取消按钮
        cancel() {
            this.open = false;
            // this.reset();
        },

        // 表单重置
        // reset() {
        //     this.form = {
        //         name: undefined,
        //     };
        //     this.resetForm("form");
        // },
        /** 搜索按钮操作 */
        handleQuery() {
            // this.getList();
        },
        /** 重置按钮操作 */
        resetQuery() {
            this.resetForm("queryForm");
            this.handleQuery();
        },
        /** 新增按钮操作 */
        handleAdd(row) {
            // this.reset();
            // this.getTreeselect();
            // if () {
            this.form.parentId = row.id;
            this.open = false;
            // this.getserceList();
            // } else {

            // }
            this.open = true;
            this.title = "添加菜单";

        },
        /** 修改按钮操作 */
        handleUpdate(row) {
            console.log(row);
            // getServices(
            //     row.id
            // ).then(res => {
            //     console.log(res);
            //     // this.form = res.data;
            //     // console.log(this.form);
            //     this.open = true;
            //     this.form.tag = 'redact'
            //     this.title = "修改菜单";
            // });

        },
        /** 提交按钮 */
        submitForm: function () {
            this.$refs["form"].validate(valid => {
                if (valid) {
                    if (this.form.tag == 'redact') {
                        console.log(this.form.tag, 1);
                        updatserviceContent(

                        ).then(response => {
                            // if (response.code === 2000) {
                            this.$message({
                                type: "success",
                                message: "修改成功!",
                            });
                            this.open = false;
                            this.form.tag = ''
                            // this.getList();
                            // }
                        });
                    } else {
                        console.log(this.form.tag, 2);
                        addServe(
                            this.form.name,
                            this.form.parentId == '' ? 0 : this.form.parentId
                        ).then(response => {
                            // if (response.code === 200) {
                            this.$message({
                                type: "success",
                                message: "新增成功!",
                            });
                            this.form.name = ''
                            this.open = false;
                            this.getserceList();
                            // }
                        });
                    }
                }
            });
        },
        /** 删除按钮操作 */
        handleDelete(row) {
            this.$confirm('是否确认删除名称为"' + row.name + '"的数据项?', "警告", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning"
            }).then(function () {
                return delSserviceContent(row.id);
            }).then(() => {
                this.getserceList()
                this.msgSuccess("删除成功");

            }).catch(function () {});
        }
    }
};
</script>
